<template>
	<view>
		<view class="nav-wrapper">
			<view style="background-color: transparent;" class="status-bar-height"></view>
			<image class="nav-bg pos-fill" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/navbar_bg.png"
				mode=""></image>
			<view class="nav-box flex flex-align-center flex-space-between"  @click="titleClick(!titleObj.isBack)">
				<view class="flex flex-align-center" v-if="!titleObj.isBack">
					<image style="width: 26rpx;height: 32rpx;"
						src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_address.png" mode=""></image>
					<text class="left-text" v-if="titleObj.address">{{ titleObj.address }}</text>
					<text class="left-text" v-else>上海</text>
				</view>
				<image @click="handlerBack" style="width: 20rpx;height: 34rpx;position: relative;z-index: 9999;" v-else
					src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow_l.png" mode=""></image>
				<view class="title pos-fill flex-center flex">{{ titleObj.title }}</view>
			</view>
		</view>
		<view class="size-box"></view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		titleObj: {
			type: Object,
			default: {}
		}
	})

	function handlerBack() {
		console.log('22')
		uni.navigateBack()
	}
	function titleClick(e){
		if(e){
			uni.navigateTo({
				url:'/pages/accompany-tmp/index/address/address'
			})
		}
	}
</script>

<style lang="scss">
	.size-box {
		height: 88rpx;
		padding-bottom: var(--status-bar-height);
	}

	.nav-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 20rpx;
		height: 488rpx;

		.nav-bg {
			width: 100%;
			height: 488rpx;
		}

		.nav-box {
			height: 88rpx;
			position: relative;
			font-weight: 500;
			color: #181D18;
			z-index: 22;

			.left-text {
				font-size: 28rpx;
				margin-left: 8rpx;
			}

			.title {
				font-size: 36rpx;
			}
		}
	}
</style>